import '../lib/jquery.js';
import { ajax } from '../utils/ajax.js';

// 定义页面元素的jQuery选择器
let listBox = $('.list');  // 用于展示商品列表的容器
let categoryBox = $('.category');  // 用于展示商品分类的容器
let filterBox = $('.filterBox').first();  // 用于筛选商品的容器，如热销或折扣
let saleBox = $('.saleBox');  // 用于展示折扣力度的容器
let sortBox = $('.sortBox');  // 用于商品排序的容器
let searchBox = $('.search');  // 用户搜索商品的输入框

// 分页控件的jQuery选择器
let firstBtn = $('.first');  // 首页按钮，用于跳转到第一页
let prevBtn = $('.prev');  // 上一页按钮，用于跳转到上一页
let nextBtn = $('.next');  // 下一页按钮，用于跳转到下一页
let lastBtn = $('.last');  // 末页按钮，用于跳转到末页

// 显示分页信息的元素
let totalBox = $('.total');  // 显示当前页码和总页数的容器
let pagesizeBox = $('.pagesize');  // 用于展示或选择每页显示多少条数据的容器
let jumpBox = $('.jump');  // 用户输入跳转到特定页码的输入框
let jumpBtn = $('.go');  // 跳转按钮，用于根据用户输入的页码进行跳转

// 总页数的变量，用于记录商品的总页数
let totalPage;

// 商品列表请求参数对象，用于存储请求商品列表时的参数
let data = {
    current: 1,  // 当前页码
    pagesize: 12,  // 每页显示的商品数量
    search: '',  // 用户搜索时输入的关键字
    filter: '',  // 筛选条件，如热销或折扣
    saleType: 10,  // 折扣类型，具体数值根据业务逻辑定义
    sortType: 'id',  // 排序字段，如商品ID
    sortMethod: 'ASC',  // 排序方法，升序或降序
    category: '',  // 商品分类
};

/**
 * 异步函数用于渲染商品分类列表
 * 通过发送HTTP GET请求到服务器获取分类数据，并将其渲染到页面上
 */
async function renderCategory() {
    // 发起异步请求获取商品分类数据
    let response = await ajax.get('/goods/category');
    // 检查响应中的状态码，如果不等于1表示请求失败
    if (response.data.code !== 1) {
        console.log('获取分类列表失败');
        return;
    }
    // 获取分类数据列表
    let list = response.data.list;
    // 构建分类列表的HTML字符串，包括一个标记为激活的“全部”分类项
    let str = `<li class="active">全部</li>`;
    // 遍历分类列表，为每个分类项添加一个列表项
    list.forEach(item => {
        str += `<li>${item}</li>`;
    });
    // 将构建好的HTML字符串设置到分类容器中，完成渲染
    categoryBox.html(str);
}

// 渲染商品列表
async function renderList() {
    let response = await ajax.get('/goods/list', { params: data });
    if (response.data.code !== 1) {
        console.log('获取商品列表失败');
        return;
    }
    let list = response.data.list;
    let str = list.map(item => `
        <li data-id="${item.goods_id}">
            <div class="show">
                <img src="${item.img_big_logo}">
                ${item.is_hot ? '<span class="hot">热销</span>' : ''}
                ${item.is_sale ? '<span>折扣</span>' : ''}
            </div>
            <div class="info">
                <p class="title">${item.title}</p>
                <p class="price">
                    <span class="curr">¥ ${item.current_price}</span>
                    <span class="old">¥ ${item.price}</span>
                </p>
            </div>
        </li>
    `).join('');
    if (list.length === 0) {
        data.current = 0;
        str = '<div>暂无商品信息</div>';
    }
    listBox.html(str);
    totalPage = response.data.total;
    totalBox.text(`${data.current} / ${totalPage}`);
    jumpBox.val(data.current);
    updatePageControls();
}

// 更新分页控件状态
function updatePageControls() {
    if (data.current <= 1) {
        firstBtn.addClass('disable');
        prevBtn.addClass('disable');
    } else {
        firstBtn.removeClass('disable');
        prevBtn.removeClass('disable');
    }
    if (data.current >= totalPage) {
        nextBtn.addClass('disable');
        lastBtn.addClass('disable');
    } else {
        nextBtn.removeClass('disable');
        lastBtn.removeClass('disable');
    }
}

// 分类点击事件
categoryBox.on('click', 'li', function() {
    $(this).addClass('active').siblings().removeClass('active');
    data.category = $(this).text();
    renderList();
});

// 首页按钮点击事件
firstBtn.on('click', function() {
    if (!$(this).hasClass('disable')) {
        data.current = 1;
        renderList();
    }
});

// 末页按钮点击事件
lastBtn.on('click', function() {
    if (!$(this).hasClass('disable')) {
        data.current = totalPage;
        renderList();
    }
});

// 上一页按钮点击事件
prevBtn.on('click', function() {
    if (!$(this).hasClass('disable')) {
        data.current--;
        renderList();
    }
});

// 下一页按钮点击事件
nextBtn.on('click', function() {
    if (!$(this).hasClass('disable')) {
        data.current++;
        renderList();
    }
});

// 跳转按钮点击事件
jumpBtn.on('click', function() {
    let page = parseInt(jumpBox.val(), 10);
    if (page >= 1 && page <= totalPage) {
        data.current = page;
        renderList();
    } else {
        alert('请输入有效的页码！');
    }
});

// 一页显示几条变更事件
pagesizeBox.on('change', function() {
    data.pagesize = parseInt($(this).val(), 10);
    renderList();
});

// 热销/折扣筛选点击事件
filterBox.on('click', 'li', function() {
    $(this).addClass('active').siblings().removeClass('active');
    data.filter = $(this).data('type');
    renderList();
});

// 折扣类型点击事件
saleBox.on('click', 'li', function() {
    $(this).addClass('active').siblings().removeClass('active');
    data.saleType = parseInt($(this).data('type'), 10);
    renderList();
});

// 排序点击事件
sortBox.on('click', 'li', function() {
    $(this).addClass('active').siblings().removeClass('active');
    data.sortType = $(this).data('type');
    data.sortMethod = $(this).data('method');
    renderList();
});

//搜索
searchBox.on('input', () => {
    //当搜索框输入时，获取值
    data.search = searchBox.val();
    data.current = 1;
    //重新渲染
    renderList();
})

//商品详情
listBox.on('click', ({target}) => {
    if (target.nodeName == 'LI') {
        //获取点击的商品的 id
        let id = target.dataset.id;
        //存在会话里面
        sessionStorage.setItem('id', id);
        //跳转到详情页
        location.href = './detail.html';
    }
});

// 初始化
(async function init() {
    renderCategory();
    renderList();
})();